import { useEffect, useRef, useState } from 'react'
import { View } from '@tarojs/components'
import { SearchBar, VirtualList, Image, Ellipsis, Tag, Price, ConfigProvider, InputNumber } from '@nutui/nutui-react-taro'
import './index.scss'

import { dataSource } from './data'

const customTheme = {
	nutuiInputnumberButtonWidth: '24px',
	nutuiInputnumberButtonHeight: '24px',
	nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
	nutuiInputnumberInputBackgroundColor: '#fff',
	nutuiInputnumberInputMargin: '0 2px',
}

function Home() {
	const [list, setList] = useState<any[]>([])
	const [pageNo, setPageNo] = useState(1)
	const isLoading = useRef(false)

	const getData = () => {
		const data: any[] = []
		const pageSize = 10
		for (let i = (pageNo - 1) * pageSize; i < dataSource?.length; i++) {
			data.push(dataSource[i])
		}
		setList((list: string[]) => {
			return [...list, ...data]
		})
		setTimeout(() => {
			isLoading.current = false
		}, 30)
	}

	const tagItem = (tags: any[]) => {
		if (tags?.length === 0) return ''
		return (
			<View className="tag-info">
				{tags.map((item: any) => {
					return (
						<Tag key={item.TagId} background="#FA2400" plain round className="tag-item">
							{item.TagName}
						</Tag>
					)
				})}
			</View>
		)
	}

	const extAttrsItem = (extAttrs: any[]) => {
		if (extAttrs?.length === 0) return ''
		return (
			<>
				{extAttrs.map((item: any) => {
					return (
						<View key={item.Id} className="normal-info">
							{item.Name}：{item?.Value ?? ''}
						</View>
					)
				})}
			</>
		)
	}

	const itemVariable = (data: any, dataIndex: number, index: number) => {
		return (
			<View className="list-item" key={data?.ProductId ?? index}>
				<Image src={data?.DefaultPicUrl ?? 'https://x'} width="80" height="80" mode="widthFix" />
				<View className="product-info">
					<Ellipsis content={data?.ProductName ?? ''} direction="end" rows="2" className="product-name" />
					<View>{tagItem(data?.DisplayTags)}</View>
					<View className="normal-info">编号：{data?.ProductCode ?? ''}</View>
					<View className="normal-info">
						销量：{data?.Sells ?? ''}
						{data?.Unit ?? ''}
					</View>
					<View>{extAttrsItem(data.ExtAttrs)}</View>
					<View className="normal-info">
						市场价：
						<Price price={data?.Price ?? 0} size="normal" thousands />/{data?.Unit ?? ''}
					</View>
					<View className="normal-info flex-center">
						<Price price={data?.SalesPrice ?? 0} size="normal" thousands />
						<View>{data?.StockText ?? ''}</View>
					</View>
					<View className="stepper">
						<ConfigProvider theme={customTheme}>
							<InputNumber defaultValue={data?.CartCount ?? 0} min={0} allowEmpty />
						</ConfigProvider>
					</View>
				</View>
			</View>
		)
	}

	const onScroll = () => {
		if (list?.length === dataSource?.length || isLoading.current) return
		isLoading.current = true
		setPageNo(pageNo + 1)
	}

	useEffect(() => {
		getData()
	}, [pageNo])

	return (
		<View className="home-page">
			<View>
				<SearchBar shape="round" />
			</View>
			<View className="virtual-list">
				<VirtualList itemHeight={100} list={list} onScroll={onScroll} itemRender={itemVariable}  itemEqual={false} />
			</View>
		</View>
	)
}

export default Home
